今天在做一个支付界面倒计时功能时碰到如下问题:
点击提交订单跳转到确认订单(支付)页面,在顶部有一个倒计时,与此同时,接口返回有创建订单时间字段,根据此字段实现倒计时
实现思路:
- 将后台获取的时间使用
vuex
储存,调用:self.$store.state.subOrder.created_at
获取到 - 将后台获取的时间使用
Date.parse
方法(此方法可以返回 1970/1/1 午夜距离该日期时间的毫秒数。)转化为一个int数值,然后加上倒计时时间(900秒),得到endTime
,然后获取当前时间,用endTiem
减去当前时间,得到剩余时间,然后通过Math.floor
逐个算出还剩几分几秒。
上代码:
computedLastPayTime() {
let self = this;
setInterval(function() {
let createTime = Date.parse(self.$store.state.subOrder.created_at) / 1000;
let endTime = createTime + 900;
let clientTime = Date.parse(new Date()) / 1000;
let lastTime = endTime - clientTime;
let int_minute;
if(lastTime > 0){
int_minute = Math.floor(lastTime/60);
lastTime -= int_minute * 60;
self.lastPayTime = int_minute+'分'+ lastTime +'秒'
} else {
}
},1000);
}
知识总结:
let clientTime = Date.parse(new Date()) / 1000;
-
int_minute = Math.floor(lastTime/60);
lastTime -= int_minute * 60;
逐个算出分、秒 -
setInterval(code,millisec)
计时器,每隔millisec
毫秒执行code
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。